<template>
	<div class="data-center-container">
		<!-- 左侧树形结构 -->
		<div class="left-tree-panel">
			<el-tabs v-model="activeTab" class="data-tabs" stretch>
				<el-tab-pane label="基础数据" name="basic">
					<el-tree ref="dataTree" :data="basicDataTree" :props="defaultProps" node-key="id" default-expand-all
						:expand-on-click-node="false" @node-click="handleNodeClick" highlight-current class="data-tree">
						<span class="custom-tree-node" slot-scope="{ node, data }"
							:class="{ 'disabled-node': data.id != '2-1' }">
							<i class="el-icon-document" v-if="data.type === 'table'"
								style="display: inline-block; width: 16px; margin-right: 4px;"></i>
							<span class="node-label">{{ node.label }}</span>
						</span>
					</el-tree>
				</el-tab-pane>

				<el-tab-pane label="数据集" name="dataset">
					<div class="empty-dataset">
						<i class="el-icon-folder-opened"></i>
						<p>暂无数据</p>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<!-- 右侧表格区域 -->
		<div class="right-table-panel">
			<div class="table-header">
        <div class="card-title">数据预览</div>
				<div class="table-info">
					<span class="total-count">总数：{{ total }}</span>
				</div>
			</div>
			<div class="table-content">
				<block-table tableKey="part2Table" :tableData="part2TableData" :loading="part2Loading" />
			</div>
		</div>
	</div>
</template>

<script>
import BlockTable from './components/blockTable.vue'
import { equipmentData } from '@/api/dataCenter'
export default {
	components: { BlockTable },
	data() {
		return {
			activeTab: 'basic',
			part2TableData: [],
			part2Loading: false,
			total: 0,
			basicDataTree: [
				{
					id: 1,
					label: 'erp资产卡片表',
					type: 'table',
					path: '',
					children: [
						{
							id: '1-2',
							label: 'odps_nydp_dev.ads_cst_xnpgpt_zcjzmxb10'
						}
					]
				},
				{
					id: 2,
					label: '资产级设备表',
					type: 'table',
					children: [
						{
							id: '2-1',
							label: 'pro_dwd_pms_prd_1.un156_02_pms30_pa_asset_equip_collect_pl'
						}
					]
				}
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			}
		}
	},
	mounted() {
		// 组件挂载时自动加载第一个节点的数据
		if (this.basicDataTree.length > 0) {
			this.loadTableData(this.basicDataTree[0])
		}
	},
	methods: {
		handleNodeClick(data) {
			console.log('点击节点:', data)

			// 父节点：控制展开/收缩
			if (data.id === 1 || data.id === 2) {
				// 获取树组件实例
				const tree = this.$refs.dataTree
				if (tree) {
					// 如果节点已展开，则收缩；如果已收缩，则展开
					if (tree.getNode(data.id).expanded) {
						tree.collapse(data.id)
					} else {
						tree.expand(data.id)
					}
				}
			}
			// 子节点：加载数据
			else if (data.id === '2-1') {
				this.loadTableData(data)
			}
		},
		async loadTableData(nodeData) {
			// 从接口获取表格数据
			this.part2Loading = true
			const p = {

			}
			try {
				const response = await equipmentData(p)

				if (response.code === 200) {
					this.part2TableData = response.rows || []
					this.total = response.total || 0
				} else {
					this.$message.error(response.msg || '获取数据失败')
					this.part2TableData = []
					this.total = 0
				}
			} catch (error) {
				this.$message.error('获取数据失败，请稍后重试')
				this.part2TableData = []
				this.total = 0
			} finally {
				this.part2Loading = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.data-center-container {
	display: flex;
	height: calc(100vh - 50px);
	background: #f5f5f5;
}

.left-tree-panel {
	width: 30%;
	background: #fff;
	border-right: 1px solid #e4e7ed;
	overflow: hidden;
}

.data-tabs {
	height: 100%;

}

.empty-dataset {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 200px;
	color: #909399;

	i {
		font-size: 48px;
		margin-bottom: 10px;
	}

	p {
		margin: 0;
		font-size: 14px;
	}
}

.data-tree {
	.custom-tree-node {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 2px 0;

		.node-label {
			display: inline-block;
			font-size: 14px;
			color: #303133;
			margin-left: 5px;
			line-height: 1.4;
			flex: 1;
		}

		.node-path {
			font-size: 12px;
			color: #909399;
			margin-left: 20px;
			margin-top: 4px;
			word-break: break-all;
			line-height: 1.3;
		}
	}
}

.right-table-panel {
	width: 80%;
	background: #fff;
	margin: 0 20px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-header {
	border-bottom: 1px solid #e4e7ed;
	display: flex;
	justify-content: space-between;
	align-items: center;
  width: 100%;
  position: relative;

	h3 {
		margin: 0;
		font-size: 18px;
		color: #303133;
	}

	.table-info {
    position: absolute;
    right: 0px;
    width: 120px;
		.total-count {
			font-size: 14px;
			color: #606266;
			font-weight: 500;
		}
	}
}

.table-content {
	padding: 20px;
	height: calc(100% - 80px);
	overflow-y: auto;
}




// 禁用节点样式
.disabled-node {
	opacity: 0.6;
	cursor: not-allowed;

	.node-label {
		color: #c0c4cc !important;
	}
}



.card-title {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
}

</style>
